<template functional>
  <svg
    class="base-icon"
    aria-hidden="true"
    :style="{
      fontSize: props.size ? (props.size + 'px') : 'inherit',
      color: props.color || 'inherit',
    }"
  >
    <use :xlink:href="`#icon-${props.name}`"></use>
  </svg>
</template>

<style>
.base-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
